
<template>
  <div>
    <h3 class="group">基础组件</h3>
    <div>
      <draggable
        v-model="baseComponent"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        :group="{ name: 'group', pull: 'clone', put: false }"
        :sort="false"
        item-key="id"
        tag="div"
        class="com-ls"
      >
        <template #item="{ element }">
          <div class="element">
             <div class="form-icon"></div>
            <div>{{ element.name }}</div>
          </div>
        </template>
      </draggable>
    </div>

    <h3 class="group">容器组件</h3>
    <div>
      <draggable
        v-model="containerComponent"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        :group="{ name: 'group', pull: 'clone', put: false }"
        :sort="false"
        item-key="id"
        tag="div"
        class="com-ls"
      >
        <template #item="{ element }">
          <div class="element">
             <div class="form-icon"></div>
            <div>{{ element.name }}</div>
          </div>


          
        </template>
      </draggable>
    </div>

    <h3 class="group">自定义组件</h3>
    <div>
      <draggable
        v-model="customComponent"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        :group="{ name: 'group', pull: 'clone', put: false }"
        :sort="false"
        item-key="id"
        tag="div"
        class="com-ls"
      >
        <template #item="{ element }">
          <div class="element">
             <div class="form-icon"></div>
            <div>{{ element.name }}</div>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>
 
<script lang="ts">
import { computed, defineComponent } from "vue";
import { LowCode } from "../../core";
import { componentSchema } from "@/components/low-code/core/schema";

export default defineComponent({
  setup() {
    const baseComponent = computed(() => {
      return componentSchema.filter((item) => {
        return item.group == "base";
      });
    });

    const containerComponent = computed(() => {
      return componentSchema.filter((item) => {
        return item.group == "container";
      });
    });

    const customComponent: any[] = [];
    LowCode.custom.map((item: { config: any }) => {
      customComponent.push(item.config);
    });

    return {
      baseComponent,
      containerComponent,
      customComponent,
    };
  },
});
</script>

<style  scoped>
h3.group {
  padding-left: 20px;
  line-height: 32px;
}
.com-ls {
  width: 250px;
  padding: 10px 10px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.com-ls .element {
  padding: 0px 3px;
  margin: 5px;
  width: 45%;
  flex-shrink: 0;
  border-radius: 5px;
  line-height: 32px;
  text-align: center;
  /* float: left; */
  box-sizing: border-box;
  cursor: move;
  background: rgba(42, 160, 250, 0.2);
  font-weight: 400;
  color: #4388bc;
  border: 1px solid #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.com-ls .element:hover {
  border: 1px dashed #2a9ff9;
}

/*定义要拖拽元素的样式*/
.ghostClass {
  width: 100%;
}

.chosenClass {
  background-color: rgba(42, 160, 250, 0.2);
  border: 1px solid #4388bc;
  color: #4388bc;
  opacity: 1 !important;
  width: 100%;
  border-radius: 5px;
  padding: 5px 10px;
}

.dragClass {
  background-color: skyblue !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.form-icon {
  width: 16px;
  height: 16px;
  border: 2px solid #409eff;
  position: relative;
  border-radius: 2px;
  margin:0 3px 0 3px;
}

.form-icon::before {
  content: "Aa";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #409eff;
  font-weight: bold;
}
</style>
